<template>
  <ADrawerPro :title="props.dict?.dictName + ' · 字典数据'" width="800px" v-bind="$attrs" :open="props.open">
    <PageTable
      :search-options="options"
      :columns="columns.filter((item) => item?.checked)"
      :data-source="sourceData"
      :loading="spinning"
      :row-selection="{ selectedRowKeys, onChange: setSelectedRowKeys }"
      :pagination="{
        current: pagination.pageNum,
        pageSize: pagination.pageSize,
        total: pagination.total,
        onChange: onPageChange
      }"
      @search="onSearchData"
    >
      <template #searchCollapse>
        <AForm layout="inline" ref="formRef" :model="formState" @finish="onSearchData" @reset="onReset">
          <AFormItem label="字典编码" name="dataCode">
            <AInput v-model:value="formState.dataCode" placeholder="请输入字典编码"></AInput>
          </AFormItem>
          <AFormItem label="字典标签" name="dataLabel">
            <AInput v-model:value="formState.dataLabel" placeholder="请输入字典标签"></AInput>
          </AFormItem>
          <AFormItem>
            <ASpace>
              <AButton html-type="reset">重置</AButton>
              <AButton type="primary" html-type="submit">搜索</AButton>
            </ASpace>
          </AFormItem>
        </AForm>
      </template>
      <template #operate>
        <ASpace>
          <AButton type="primary" ghost :icon="createVNode(PlusOutlined)" @click="() => setOpenAddModal(true)">
            添加
          </AButton>
          <APopconfirm
            title="您确定批量删除数据吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="() => onDelete(selectedRowKeys)"
          >
            <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">删除</AButton>
          </APopconfirm>
        </ASpace>
        <ASpace>
          <ATooltip title="刷新列表">
            <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
              {{ timer || '' }}
            </AButton>
          </ATooltip>
          <RDropdownCheckbox
            placement="bottomRight"
            v-model:value="columns"
            :fieldNames="{ label: 'title', value: 'key', checked: 'checked' }"
          >
            <AButton :icon="createVNode(AppstoreOutlined)"></AButton>
          </RDropdownCheckbox>
        </ASpace>
      </template>
      <template #bodyActionCell="{ record }">
        <AButton type="link" size="small" :icon="createVNode(EditOutlined)" @click="() => onOpenEditModal(record)">
          编辑
        </AButton>
        <APopconfirm
          title="您确定删除该数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete([record.dataId])"
        >
          <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">删除</AButton>
        </APopconfirm>
      </template>
    </PageTable>
  </ADrawerPro>
  <AddDictData :open="openAddModal" @finish="onAddDictData" @cancel="setOpenAddModal" />
  <EditDictData :data-id="dataId" :open="openEditModal" @finish="onEditDictData" @cancel="setOpenEditModal" />
</template>

<script setup>
import { createVNode, ref, reactive, toValue, watch } from 'vue';
import { ADrawerPro } from '@/components/iteration';
import { PageTable } from '@/components/templates/index.js';
import { RDropdownCheckbox } from '@/components/custom/index.js';
import AddDictData from './AddDictData.vue';
import EditDictData from './EditDictData.vue';

import { AppstoreOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { useState, useFetchPageData } from '@/hooks';
import {
  fetchGetDictDataList,
  fetchAddDictData,
  fetchUpdateDictData,
  fetchDeleteDictData
} from '@/api/system/dictData';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  open: { type: Boolean, default: false },
  dict: { type: Object, default: () => ({}) }
});

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '数据编码', value: 'dataCode', placeholder: '请输入数据编码' },
  { label: '数据标签', value: 'dataLabel', placeholder: '请输入数据标签' },
  { label: '数据键值', value: 'dataValue', placeholder: '请输入数据键值' }
];

const defaultColumns = [
  { key: 'index', title: '序号', dataIndex: 'index', checked: true },
  { key: 'dataCode', title: '数据编码', dataIndex: 'dataCode' },
  { key: 'dataLabel', title: '数据标签', dataIndex: 'dataLabel', checked: true },
  { key: 'dataValue', title: '数据键值', dataIndex: 'dataValue', checked: true },
  { key: 'statusName', title: '状态', dataIndex: 'statusName', checked: true },
  { key: 'createTime', title: '创建时间', dataIndex: 'createTime', checked: true },
  { key: 'action', title: '操作', checked: true }
];
const initValues = { dataCode: '', dataLabel: '', remark: '' };
const columns = ref(defaultColumns);
const formRef = ref();
const formState = reactive(initValues);
const [openAddModal, setOpenAddModal] = useState(false);
const [dataId, setDataId] = useState(null);
const [openEditModal, setOpenEditModal] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const {
  sourceData,
  spinning: spinning,
  pagination,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData((v) => fetchGetDictDataList({ ...v, dictId: props.dict?.dictId }));

watch(
  () => props.open,
  (val) => val && onFetchData()
);

const onReset = () => {
  onResetData();
  toValue(formRef).resetFields();
};

const onAddDictData = async (values) => {
  values.dictId = props.dict?.dictId;
  await fetchAddDictData(values);
  setOpenAddModal(false);
  onRefreshData(true);
};

const onOpenEditModal = (values) => {
  setDataId(values.dataId);
  setOpenEditModal(true);
};

const onEditDictData = async (values) => {
  values.dictId = props.dict?.dictId;
  await fetchUpdateDictData(values);
  setOpenEditModal(false);
  setDataId(null);
  onRefreshData(true);
};

const onDelete = async (values) => {
  await fetchDeleteDictData(values);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  min-height: 100%;
  overflow: auto;
}
</style>
